<!-- src/components/BorrowRecordsTable.vue -->
<template>
  <div class="borrow-records-table">
    <el-table
      :data="records"
      v-loading="loading"
      style="width: 100%"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="记录ID" width="80" align="center" />
      <el-table-column prop="borrowerName" label="借阅人" width="120" />
      <el-table-column prop="borrowerPhone" label="联系电话" width="130" />
      <el-table-column label="借阅日期" width="180" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.borrowDate) }}
        </template>
      </el-table-column>
      <el-table-column label="归还日期" width="180" align="center">
        <template #default="scope">
          <span v-if="scope.row.returnDate">
            {{ formatDate(scope.row.returnDate) }}
          </span>
          <span v-else-if="scope.row.returned">
            已归还
          </span>
          <el-tag v-else type="warning" size="small">未归还</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.returned ? 'success' : 'warning'"
            size="small"
            effect="dark"
          >
            {{ scope.row.returned ? '已归还' : '借阅中' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center" v-if="showReturnButton">
        <template #default="scope">
          <el-button
            v-if="!scope.row.returned"
            size="small"
            type="success"
            @click="handleReturn(scope.row)"
            :disabled="returningId === scope.row.id"
            :loading="returningId === scope.row.id"
          >
            {{ returningId === scope.row.id ? '归还中...' : '归还' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-empty
      v-if="!loading && records.length === 0"
      description="暂无借阅记录"
      :image-size="100"
    />
  </div>
</template>

<script>
import { format } from 'date-fns'

export default {
  name: 'BorrowRecordsTable',
  props: {
    records: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    showReturnButton: {
      type: Boolean,
      default: false
    },
    returningId: {
      type: [Number, String, null],
      default: null
    }
  },
  emits: ['return'],
  setup(props, { emit }) {
    const formatDate = (dateString) => {
      if (!dateString) return ''
      try {
        return format(new Date(dateString), 'yyyy-MM-dd HH:mm')
      } catch (error) {
        console.error('日期格式化失败:', dateString, error)
        return dateString
      }
    }

    const tableRowClassName = ({ row }) => {
      if (row.returned) {
        return 'returned-row'
      }
      return ''
    }

    const handleReturn = (record) => {
      console.log('点击归还按钮，记录ID:', record.id)
      emit('return', record.id)
    }

    return {
      formatDate,
      tableRowClassName,
      handleReturn
    }
  }
}
</script>

<style scoped>
.borrow-records-table {
  margin-top: 20px;
}
.returned-row {
  background-color: #f0f9eb !important;
}
.returned-row :deep(.el-tag--success) {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
}
</style>